@@ -1,5 +1,12 @@ |
||
1 | 1 |
{ |
2 | 2 |
"website-name" : "Portfolio Go", |
3 |
+ "backgrounds" : |
|
4 |
+ [ |
|
5 |
+ "content/videos/bg_1.mov", |
|
6 |
+ "content/videos/bg_2.mov", |
|
7 |
+ "content/videos/bg_3.mov", |
|
8 |
+ "content/videos/bg_4.mov" |
|
9 |
+ ], |
|
3 | 10 |
"navigation" : |
4 | 11 |
[ |
5 | 12 |
{ |
@@ -17,7 +17,6 @@ |
||
17 | 17 |
<script src="../bower_components/angular/angular.js"></script> |
18 | 18 |
<script src="../bower_components/famous-angular/dist/famous-angular.js"></script> |
19 | 19 |
<script src="../bower_components/famous/dist/famous-global.min.js"></script> |
20 |
- <script src="../bower_components/requirejs/require.js"></script> |
|
21 | 20 |
<script src="../bower_components/angular-animate/angular-animate.js"></script> |
22 | 21 |
<script src="../bower_components/angular-cookies/angular-cookies.js"></script> |
23 | 22 |
<script src="../bower_components/angular-resource/angular-resource.js"></script> |
@@ -28,7 +27,8 @@ |
||
28 | 27 |
<script src="../bower_components/ngFx/dist/ngFx.js"></script> |
29 | 28 |
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script> |
30 | 29 |
<script src="../bower_components/angular-youtube-mb/src/angular-youtube-embed.js"></script> |
31 |
- <!-- endbower --> |
|
30 |
+ <script src="../bower_components/createjs-preloadjs/lib/preloadjs-0.6.1.combined.js"></script> |
|
31 |
+ <!-- endbower --> |
|
32 | 32 |
<!-- endbuild --> |
33 | 33 |
<script src="https://www.youtube.com/iframe_api"></script> |
34 | 34 |
|
@@ -6,47 +6,79 @@ |
||
6 | 6 |
* Controller of the domainManagerApp |
7 | 7 |
*/ |
8 | 8 |
|
9 |
-angular.module('goApp.background', ['famous.angular']) |
|
10 |
- .controller('BackgroundController',['$scope', '$rootScope', '$famous', '$timeline', function ($scope, $rootScope, $famous, $timeline) { |
|
9 |
+angular.module('goApp.background', ['famous.angular', 'goApp.data']) |
|
10 |
+ .controller('BackgroundController',['$scope', '$rootScope', '$famous', '$timeline', 'Data', '$timeout', function ($scope, $rootScope, $famous, $timeline, Data, $timeout) { |
|
11 | 11 |
|
12 | 12 |
'use strict'; |
13 | 13 |
|
14 |
- var View = $famous['famous/core/View']; |
|
15 |
- var Modifier = $famous['famous/core/Modifier']; |
|
16 |
- var Surface = $famous['famous/core/Surface']; |
|
17 |
- var Transform = $famous['famous/core/Transform']; |
|
18 |
- var VideoSurface = $famous['famous/surfaces/VideoSurface']; |
|
14 |
+ // Functions |
|
15 |
+ |
|
16 |
+ $scope.loadBackgroundData = function() { |
|
17 |
+ $scope.videos = Data.getBackgrounds(); |
|
18 |
+ $rootScope.$on('data:loaded', function(data) { |
|
19 |
+ if(!$scope.$$phase) { |
|
20 |
+ $scope.$apply(function(){ |
|
21 |
+ $scope.videos = Data.getBackgrounds(); |
|
22 |
+ $scope.preload(); |
|
23 |
+ }); |
|
24 |
+ } else { |
|
25 |
+ $scope.videos = Data.getBackgrounds(); |
|
26 |
+ $scope.preload(); |
|
27 |
+ } |
|
28 |
+ }); |
|
29 |
+ } |
|
30 |
+ |
|
31 |
+ $scope.preload = function() { |
|
32 |
+ $scope.current_video = $scope.videos[$scope.randomIntFromInterval(0,3)]; |
|
33 |
+ console.log("> Preloading video: " + $scope.current_video) |
|
34 |
+ var preload = new createjs.LoadQueue(); |
|
35 |
+ preload.addEventListener("complete", handleFileComplete); |
|
36 |
+ // for (var i = 0; i < $scope.videos.length; i++) { |
|
37 |
+ // preload.loadFile($scope.videos[i]); |
|
38 |
+ // } |
|
39 |
+ preload.loadFile($scope.current_video); |
|
40 |
+ function handleFileComplete(event) { |
|
41 |
+ console.log("> Preload Complete"); |
|
42 |
+ $scope.startBackgroundVideo(); |
|
43 |
+ $timeout(function(){ |
|
44 |
+ $rootScope.$broadcast('background:loaded'); |
|
45 |
+ },1000); |
|
46 |
+ } |
|
47 |
+ } |
|
19 | 48 |
|
20 | 49 |
$scope.randomIntFromInterval = function(min,max) { |
21 | 50 |
return Math.floor(Math.random()*(max-min+1)+min); |
22 | 51 |
}; |
23 | 52 |
|
24 |
- $scope.videos = ['content/videos/bg_1.mov', 'content/videos/bg_2.mov', 'content/videos/bg_1.mov', 'content/videos/bg_2.mov', 'content/videos/bg_3.mov', 'content/videos/bg_4.mov']; |
|
25 |
- $scope.current_video = $scope.videos[$scope.randomIntFromInterval(0,5)]; |
|
53 |
+ $scope.startBackgroundVideo = function() { |
|
54 |
+ console.log("> Playing background video") |
|
55 |
+ var video = new VideoSurface({ |
|
56 |
+ size: [undefined, undefined], |
|
57 |
+ autoplay: true, |
|
58 |
+ src: $scope.current_video, |
|
59 |
+ classes: ['bg_video'], |
|
60 |
+ properties: { |
|
61 |
+ zIndex: 1, |
|
62 |
+ } |
|
63 |
+ }); |
|
64 |
+ video.setAttributes({ loop: '' }); |
|
65 |
+ var videoModifier = new Modifier(); |
|
66 |
+ videoModifier.transformFrom(function(){ |
|
67 |
+ //transform: Transform.translate(0, 0, 0); |
|
68 |
+ Transform.translate(0, 0, 0); |
|
69 |
+ }); |
|
70 |
+ $scope.backgroundView.add(videoModifier).add(video); |
|
71 |
+ } |
|
26 | 72 |
|
27 |
- $scope.backgroundView = new View(); |
|
28 |
- |
|
29 |
- var video = new VideoSurface({ |
|
30 |
- size: [undefined, undefined], |
|
31 |
- autoplay: true, |
|
32 |
- src: $scope.current_video, |
|
33 |
- classes: ['bg_video'], |
|
34 |
- properties: { |
|
35 |
- zIndex: 1, |
|
36 |
- } |
|
37 |
- }); |
|
38 |
- video.setAttributes({ |
|
39 |
- loop: '' |
|
40 |
- }); |
|
41 |
- |
|
42 |
- var videoModifier = new Modifier(); |
|
43 |
- videoModifier.transformFrom(function(){ |
|
44 |
- //transform: Transform.translate(0, 0, 0); |
|
45 |
- Transform.translate(0, 0, 0); |
|
46 |
- }); |
|
47 |
- |
|
48 |
- $scope.backgroundView.add(videoModifier).add(video); |
|
73 |
+ // Start Background Controller |
|
49 | 74 |
|
75 |
+ var View = $famous['famous/core/View']; |
|
76 |
+ var Modifier = $famous['famous/core/Modifier']; |
|
77 |
+ var Surface = $famous['famous/core/Surface']; |
|
78 |
+ var Transform = $famous['famous/core/Transform']; |
|
79 |
+ var VideoSurface = $famous['famous/surfaces/VideoSurface']; |
|
80 |
+ $scope.backgroundView = new View(); |
|
50 | 81 |
|
82 |
+ $scope.loadBackgroundData(); |
|
51 | 83 |
|
52 | 84 |
}]); |
@@ -12,5 +12,4 @@ angular.module('goApp.index', ['famous.angular', 'ngFx', 'ngAnimate']) |
||
12 | 12 |
|
13 | 13 |
'use strict'; |
14 | 14 |
|
15 |
- |
|
16 | 15 |
}]); |
@@ -12,23 +12,16 @@ angular.module('goApp.navigation', ['famous.angular', 'ngRoute', 'ngFx', 'ngAnim |
||
12 | 12 |
|
13 | 13 |
'use strict'; |
14 | 14 |
|
15 |
- $rootScope.$on('data:loaded', function(data) { |
|
15 |
+ $rootScope.$on('background:loaded', function() { |
|
16 | 16 |
if(!$scope.$$phase) { |
17 | 17 |
$scope.$apply(function(){ |
18 |
- $scope.navigation = Data.get(); |
|
18 |
+ $scope.navigation = Data.getNavigation(); |
|
19 | 19 |
}); |
20 |
+ } else { |
|
21 |
+ $scope.navigation = Data.getNavigation(); |
|
20 | 22 |
} |
21 | 23 |
}); |
22 | 24 |
|
23 |
- $http({ |
|
24 |
- method: 'GET', |
|
25 |
- url: 'data.json' |
|
26 |
- }).success(function(data) { |
|
27 |
- $timeout(function(){ |
|
28 |
- $scope.navigation = data.navigation; |
|
29 |
- },500); |
|
30 |
- }); |
|
31 |
- |
|
32 | 25 |
$scope.subNavigation = []; |
33 | 26 |
$scope.sub2Navigation = []; |
34 | 27 |
$scope.last_click = ""; |
@@ -14,8 +14,8 @@ angular.module('goApp.data', []) |
||
14 | 14 |
}).success(function(json_data) { |
15 | 15 |
data = json_data; |
16 | 16 |
data_loaded = true; |
17 |
- $rootScope.$broadcast('data:loaded', data); |
|
18 | 17 |
console.log('> Loaded data.json'); |
18 |
+ $rootScope.$broadcast('data:loaded', data); |
|
19 | 19 |
}); |
20 | 20 |
|
21 | 21 |
this.get = function() { |
@@ -51,4 +51,12 @@ angular.module('goApp.data', []) |
||
51 | 51 |
return page_data; |
52 | 52 |
}; |
53 | 53 |
|
54 |
+ this.getNavigation = function() { |
|
55 |
+ return data.navigation; |
|
56 |
+ }; |
|
57 |
+ |
|
58 |
+ this.getBackgrounds = function() { |
|
59 |
+ return data.backgrounds; |
|
60 |
+ }; |
|
61 |
+ |
|
54 | 62 |
}]); |
@@ -32,7 +32,8 @@ |
||
32 | 32 |
"famous-bkimagesurface": "~1.0.3", |
33 | 33 |
"angular-ui": "~0.4.0", |
34 | 34 |
"angular-ui-router": "~0.2.15", |
35 |
- "angular-youtube-mb": "~1.0.2" |
|
35 |
+ "angular-youtube-mb": "~1.0.2", |
|
36 |
+ "createjs-preloadjs": "~0.6.1" |
|
36 | 37 |
}, |
37 | 38 |
"resolutions": { |
38 | 39 |
"angular": "1.3.8" |